<template>
  <div class="about">
    <my-header>许愿墙</my-header>
    <my-input v-model="dream" class="dream"></my-input>
    <my-dream-type @getimg="getImg" :num="num"></my-dream-type>
    <button class="btn" :disabled="disabled" @click="addDream">
      {{ text }}
    </button>
    <div class="dream-box">
      <ul>
        <li
          v-for="(item, i) in dreamList"
          :key="item.id"
          :style="{
            
            backgroundImage: 'url(' + item.backimg + ')',
            left: item.left,
            top: item.top,
          }"
          @click="edit(item)"
          @touchstart="touchStart($event, i)"
          @touchmove="touchMove($event, i)"
          @touchend="touchEnd"
        >
          {{ item.content }}
          <span @click.stop="del(i)">X</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import myHeader from "@/components/header/myHeader";
import myInput from "@/components/input/myInput";
import myDreamType from "@/components/dreamType/myDreamType";
export default {
  components: {
    myHeader,
    myInput,
    myDreamType,
  },
  data() {
    return {
      dream: "",
      text: "再想想",
      disabled: true,
      img: "",
      dreamList: [],
      startX: 0,
      startY: 0,
      isEdit: false,
      choseDream: {},
      num: -1,
    };
  },
  created() {
    this.dreamList = JSON.parse(localStorage.getItem("dreams")) || [];
  },
  methods: {
    checkClick() {
      if (this.dream && this.img) {
        this.disabled = false;
        this.text = "许愿";
      } else {
        this.disabled = true;
        this.text = "再想想";
      }
    },
    getImg(img) {
      this.img = img;
      if (this.isEdit) {
        this.text = "修改";
        this.disabled = false;
      } else {
        this.checkClick();
      }
    },

    addDream() {
      if (this.isEdit) {
        this.choseDream.content = this.dream;
        this.choseDream.backimg = this.img;
        this.isEdit = false;
      } else {
        const obj = {
          backimg: this.img,
          content: this.dream,
          left: Math.floor(Math.random() * 365) + "px",
          top: Math.floor(Math.random() * 300) + "px",
          id: new Date().getTime(),
        };
        if (this.dreamList.length < 6) {
          this.dreamList.push(obj);
        } else {
          this.$loading.show("愿望已达上限");
          setTimeout(() => {
            this.$loading.hide();
          }, 1000);
        }
      }
      this.num = this.num === -1 ? -2 : -1;
      // console.log(this.dreamList[i].)
      this.dream = "";
      localStorage.setItem("dreams", JSON.stringify(this.dreamList));
    },

    // 删除愿望
    del(i) {
      this.dreamList.splice(i, 1);
    },
    // 拖拽逻辑
    touchStart(e, i) {
      this.startX = e.touches[0].pageX - parseFloat(this.dreamList[i].left);
      this.startY = e.touches[0].pageY - parseFloat(this.dreamList[i].top);
    },
    // 随机位置
    touchMove(e, i) {
      this.dreamList[i].left = e.touches[0].pageX - this.startX + "px";
      this.dreamList[i].top = e.touches[0].pageY - this.startY + "px";
    },
  //  鼠标松开保存拖拽的位置
    touchEnd() {
      localStorage.setItem("dreams", JSON.stringify(this.dreamList));
    },

    // 编辑愿望
    edit(item) {
      this.dream = item.content;
      this.img = item.backimg;
      this.isEdit = true;
      this.choseDream = item;
    },
  },

  watch: {
    dream(to) {
      if (this.isEdit) {
        this.text = "修改";
        this.disabled = false;
      } else {
        this.checkClick();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.about {
  text-align: center;
}
.dream {
  margin: 20px 0;
}
.btn {
  margin-top: 20px;
  background-color: green;
  color: #fff;
  border: none;
  padding: 6px 15px;
  border-radius: 4px;
}

.btn[disabled] {
  background-color: #ccc;
  color: #eee;
}

.dream-box {
  position: relative;
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  li {
    position: absolute;
    width: 80px;
    height: 80px;
    line-height: 80px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: rgb(255, 0, 200);
    font-size: 26px;
    span {
      position: absolute;
      width: 20px;
      height: 20px;
      right: 0;
      top: 0;
      text-align: center;
      line-height: 20px;
      background-color: rgb(208, 0, 255);
      color: #333;
      font-size: 16px;
      color: rgb(0, 255, 145);
    }
  }
}
</style>